<template>
  <h1>用于展示当前系统中的统计数据、统计报表及重要实时数据</h1>
  <span style="font-size: 20px;font-weight: bold">
<!--    登陆IP地址：{{IP?.query}}-->
<!--    <p>{{IP?.country}}{{IP?.regionName}}{{IP?.city}}，经度：{{IP?.lat}}，纬度：{{IP?.lat}}</p>-->
    登陆IP地址：{{IP?.ipinfo.text}}
    <p>{{IP?.adcode.r}}</p>
  </span>
  <div style="display: flex;justify-content: space-between;margin-top: 60px">
    <div ref="line" style="width: 100%; height: 500px"></div>
    <div ref="container" style="width: 100%; height: 500px"></div>
  </div>
  <div ref="more" style="width: 100%; height: 500px;margin-top: 150px"></div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {histogram,lineChart,linkShare} from '@/echarts/api'
import axios from "axios";
interface Address{
  status: string,
  country: string,
  countryCode: string,
  region: string,
  regionName: string,
  city: string,
  zip: string,
  lat: number,
  lon: number,
  timezone: string,
  isp: string,
  org: string,
  as: string,
  query:string
}
interface IpV4Address{
  code: 200,
  msg: "SUCCESS",
  ipinfo: {
    type: "ipv4",
    text: "111.85.228.251",
    cnip: true
  },
  ipdata: {
    info1: "贵州省",
    info2: "黔东南市",
    info3: "黎平",
    isp: "联通"
  },
  adcode: {
    o: "贵州省黔东南市黎平 - 联通",
    p: "贵州",
    c: "黔东南",
    n: "贵州-黔东南",
    r: "贵州-黔东南苗族侗族自治州",
    a: "522631",
    i: true
  },
  tips: "接口由VORE-API(https://api.vore.top/)免费提供",
  time: 1753232386
}
const container = ref<HTMLElement | null>(null);
const line = ref<HTMLElement | null>(null);
const more = ref<HTMLElement | null>(null);
const data = ref({})
import {getHistogram} from "@/api/api"
const IP = ref<IpV4Address>();
onMounted(() =>{
  getPublicIP();
  // histogram(container,data2.value);
  lineChart(line);
  linkShare(more);
})

async function getPublicIP(){
  //https://api.vore.top/api/IPdata?ip=
  //http://ip-api.com/json/?lang=zh-CN'
  await axios.get('https://api.vore.top/api/IPdata?ip=').then((res:object) =>{
    IP.value = res.data
  }).catch(er =>{
  })
}

async function histogramData() {
  const res = await getHistogram();
    data.value = res.data
}
histogramData().then(() =>{
  histogram(container,data.value);
})
</script>
